<template>
  <div class="common-page border-background"> 
    <div class="case-block">
      <div class="title">半透明边框</div>
      <div class="sample first">
        <div class="model">半透明边框</div>
      </div>
    </div>
    
    <div class="case-block">
      <div class="title">多重边框1（box-shadow）</div>
      <div class="sample second">
        <div class="model">box-shadow</div>
      </div>
    </div>

    <div class="case-block">
      <div class="title">多重边框2（outline）</div>
      <div class="sample third">
        <div class="model">box-shadow</div>
      </div>
    </div>

    <div class="case-block">
      <div class="title">内部圆角</div>
      <div class="sample forth">
        <div class="model">box-shadow</div>
      </div>
    </div>

    <div class="case-block">
      <div class="title">横纵向条纹背景</div>
      <div class="sample fifth clearfix">
        <div class="model"></div>
        <div class="model2"></div>
        <div class="model3"></div>
      </div>
    </div>

    <div class="case-block">
      <div class="title">斜纹背景</div>
      <div class="sample sixth clearfix">
        <div class="model a"></div>
        <div class="model b"></div>
        <div class="model c"></div>
      </div>
    </div>

    <div class="case-block">
      <div class="title">复杂重复背景</div>
      <div class="sample seventh clearfix">
        <div class="model a"></div>
        <div class="model b"></div>
      </div>
    </div>
    <div class="case-block">
      <div class="title">复杂重复背景(波点)</div>
      <div class="sample eighth clearfix">
        <div class="model a"></div>
        <div class="model b"></div>
        <div class="model c"></div>
      </div>
    </div>
    <div class="case-block">
      <div class="title">复杂重复背景(棋盘)</div>
      <div class="sample ninth clearfix">
        <div class="model a"></div>
        <div class="model b"></div>
        <div class="model c"></div>
      </div>
    </div>
    <div class="case-block">
      <div class="title">伪随机背景</div>
      <div class="sample tenth clearfix">
        <div class="model a"></div>
      </div>
    </div>

    <div class="case-block">
      <div class="title">图片嵌套边框</div>
      <div class="sample eleventh clearfix">
        <div class="model a"></div>
        <div class="model b"></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="stylus">
@import '../../../../styles/mixins.styl'
.border-background
  padding 10px;
.case-block
  padding 10px;
  border-bottom 1px solid lightgray
  .title
    font-size: 18px
    font-weight bold
.sample.first
  margin 0 auto
  width: 70%
  height: 200px;
  background: red
  .model
    margin 0px auto
    width 150px;
    height 150px;
    border: 10px solid hsla(0,0%,100%,.5);
    background white
    background-clip padding-box

.sample.second
  padding 15px
  .model
    width 80px;
    height 80px;
    background yellowgreen
    box-shadow 0 0 0 10px blue,
               0 0 0 15px deeppink
.sample.third
  padding 15px
  .model
    width 100px;
    height 100px;
    background yellowgreen
    border:5px solid black;
    outline:5px solid red;
    outline-offset:5px;
    
.sample.forth
  padding 15px
  .model
    width 150px
    height 100px;
    border-radius 10px
    background pink
    outline 5px solid green
    box-shadow 0 0 0 5px green
.sample.fifth
  padding 10px
  .model
    float: left
    width 200px;
    height 200px
    background repeat
    background-image linear-gradient(blue 50%, red 50%)      
    background-size 100% 30px
  .model2
    float left
    margin-left 10px
    width 200px
    height 200px;
    background repeat
    background-image linear-gradient(blue 30%, red 30%, red 60%, yellow 60%)
    background-size 100% 30px
  .model3
    float left
    margin-left 10px
    width 200px
    height 200px;
    background repeat
    background-image linear-gradient(90deg, blue 30%, red 30%, red 60%, yellow 60%)
    background-size 30px 100%
.sample.sixth
  padding 10px
  .model
    float: left
    width 200px;
    height 200px
    margin-right 10px;
    border 1px solid black;
    &.a
      background repeat
      background-size 25px 25px
      background-image linear-gradient(45deg, blue 25%, red 25%, red 50%, blue 50%, blue 75%, red 75%)
    &.b
      background repeating-linear-gradient(60deg, blue, blue 20px, red 0, red 40px)
    &.c
      background-color orange
      background-image repeating-linear-gradient(60deg, transparent, transparent 20px, rgba(255,255,255,0.5) 0, rgba(255,255,255,0.5) 40px)
.sample.seventh
  padding 10px
  .model
    float: left
    width 200px;
    height 200px
    margin-right 10px;
    border 1px solid black;
    &.a
      background repeating-linear-gradient(transparent, transparent 10px, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.5) 20px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.5) 20px)
    &.b
      background: #58a;
      background-image: linear-gradient(white 2px, transparent 0), // 大网格横线
                        linear-gradient(90deg, white 2px, transparent 0), // 大网格纵线
                        linear-gradient(rgba(255,255,255,0.3) 1px, transparent 0),
                        linear-gradient(90deg, rgba(255,255,255,0.3) 1px, transparent 0)
      background-size: 20px 20px,
                       20px 20px,
                       5px 5px,
                       5px 5px; 
.sample.eighth
  padding 10px
  .model
    float: left
    width 200px;
    height 200px
    margin-right 10px;
    border 1px solid black;
    &.a
      background #655;
      background-image: radial-gradient(pink 30%, transparent 0)
      background-size 30px 30px;
    &.b
      background repeat
      background-color #655;
      background-image: radial-gradient(pink 30%, transparent 0),
                        radial-gradient(pink 30%, transparent 0);
      background-size 30px 30px;
      background-position 0 0, 15px 15px;
    &.c
      polka(20px, 30%, blue, yellow)
.sample.ninth
  padding 10px
  .model
    float: left
    width 200px;
    height 200px
    margin-right 10px;
    border 1px solid black;
    &.a
      background repeat
      background-color gray
      background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
                        linear-gradient(45deg, transparent 75%, #bbb 0%),
                        linear-gradient(45deg, #bbb 25%, transparent 0),
                        linear-gradient(45deg, transparent 75%, #bbb 0%);
      background-position: 0 0, 10px 10px, 10px 10px, 20px 20px;
      background-size: 20px 20px;
    &.b
      checker-bg(rgba(0,0,0,0), rgba(0,0,0,0.3), 40px)
    &.c
      background: #eee url('data:image/svg+xml,\
                  <svg xmlns="http://www.w3.org/2000/svg" \
                  width="100" height="100" \
                  fill-opacity=".25">\
                  <rect x="50" width="50" height="50" /> \
                  <rect y="50" width="50" height="50" /> \
                  </svg>');
      background-size: 20px 20px;
.sample.tenth
  padding 10px
  .model
    width 60% 
    height 150px;
    margin 0 auto;
    border 1px solid black;
    background repeat;
    background-image linear-gradient(90deg, red 24px, transparent 0),
                     linear-gradient(90deg, blue 18px, transparent 0),
                     linear-gradient(90deg, green 30px, transparent 0);
    background-size: 83px 100%, 61px 100%, 41px 100%;
.sample.eleventh
  padding 10px
  .model
    margin-bottom 10px;
    width: 60%
    height 220px
    &.a
      border 10px solid transparent
      background-image: linear-gradient(white, white),
                        repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, blue 0, blue 37.5%, transparent 0, transparent 50%);
      background-size: 100% 100%, 50px 50px;
      background-clip: padding-box, border-box;
    &.b
      border 1px solid transparent
      background-image: linear-gradient(white, white),
                        repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%, black 0, black 75%, white 0, white 100%);
      background-size: 100% 100%, 10px 10px;
      background-clip: padding-box, border-box;
      animation: ants 12s linear infinite;
@keyframes ants
  to
    background-position: 100%
</style> 
<script>
export default {
  name: 'BorderBackground',
  props: {

  },
  data () {
    return {
      

    }
  },
  computed: {
 
  },
  created() {
  },
  mounted() {
     
  },
  methods: {
    
  }
}
</script>





